<template>
  <div class="home">
    <heads
      ><slot>昵称：{{ $store.state.nc }}&emsp;许愿墙</slot></heads
    >
    <div class="input">
      <input type="text" placeholder="请输入愿望" v-model="wish" />
    </div>

    <div class="kf_sel">
      <div
        v-for="(item, i) in list"
        :key="i"
        :style="checkcolor(item)"
        @click="color(item, i)"
        :class="i == num ? 'isChecked' : ''"
      ></div>
    </div>
    <van-button v-show="wish === '' || num === -1" disabled>再想想</van-button>
    <van-button v-show="wish != '' && num != -1" @click="tj">提交</van-button>
    <div class="kf_it">
      <div
        v-for="(item, i) in $store.state.wishList"
        :key="i"
        :style="{
          background: item.color,
          top: item.top,
          left: item.left,
        }"
        @touchstart="touchStart($event, i)"
        @touchmove="touchMove($event, i)"
        @touchend="touchEnd(item,i)"
      >
        <p style="color:#fff;">{{ item.wish }}</p>
        <span @click="del(item.id)">X</span>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import heads from "@/components/heads.vue";
// import inp from "@/components/inp.vue";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  name: "Home",
  components: {
    heads,
    // inp,
  },
  data() {
    return {
      list: ["red", "blue", "yellow", "black", "skyblue"],
      disabled: true,
      colors: "",
      num: -1,
      wish: "",
    };
  },
  methods: {
    del(i) {
      this.$store.commit("del", i);
    },
    checkcolor(item) {
      return { background: `${item}` };
    },
    color(item, i) {
      this.num = i;
      this.colors = item;
    },
    tj() {
      if (this.wish == "") {
        Toast("不能为空");
      } else {
        if (this.$store.state.wishList.length < 5) {
          this.$store.commit("wish", {
            wish: this.wish,
            color: this.colors,
            top: Math.random() * 100 + "px",
            left: Math.random() * 100 + "px",
            id:this.$store.state.wishList.length
          });
        } else {
          Toast("最多只能添加5条");
        }
      }

      this.wish = "";
      this.num = -1;
    },
    touchStart(e, i) {
      this.startX = e.touches[0].pageX - parseFloat(this.$store.state.wishList[i].left);
      this.startY = e.touches[0].pageY - parseFloat(this.$store.state.wishList[i].top);
    },

    touchMove(e, i) {
      this.$store.state.wishList[i].left = e.touches[0].pageX - this.startX + "px";
      this.$store.state.wishList[i].top = e.touches[0].pageY - this.startY + "px";
    },

    touchEnd(item,i) {
      // console.log(item,i);
     this.$store.commit('remember',{item:item,i:i})
    },
  },
};
</script>
<style lang="scss" scoped>
.kf_sel {
  width: 100%;
  height: 100px;  
  background-color: wheat;
  display: flex;
  div {
    margin-top: 10px;
    margin-left: 15px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
}
.isChecked {
  border: 2px solid rgb(148, 6, 243);
}
.kf_it {
  width: 100%;
  height: calc(100%-200px);
  position: relative;
  div {
    width: 100px;
    height: 100px;
    position: relative;
    span {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
.input {
  width: 100%;
  height: 40px;
  margin: 5px;
  input {
    width: 80%;
    height: 35px;
  }
}
</style>
